import { ref } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router';
import { useCookies } from '@vueuse/integrations/useCookies'
import { router } from '~/router';

export function useTabList() {
  const route = useRoute()
  const cookie = useCookies()

  // 当前激活的标签
  const activeTab = ref(route.path)

  const tabList = ref([
    {
      title: '后台首页',
      path: '/'
    }
  ])

  // 添加标签导航
  function addTab(tab) {
    const noTab = tabList.value.findIndex(t => t.path === tab.path) === -1
    // 如果没有tab就添加进去
    if (noTab) {
      tabList.value.push(tab)
    }
    // 存储到cookie
    cookie.set('tabList', tabList.value)
  }

  // 初始化标签导航列表
  function initTabList() {
    const tbs = cookie.get('tabList')
    if (tbs) {
      tabList.value = tbs
    }
  }

  initTabList()

  // 监听当前点击的路由
  onBeforeRouteUpdate((to, from) => {
    activeTab.value = to.path

    addTab({
      title: to.meta.title, // 拿到路由的名字
      path: to.path // 拿到路由的路径
    })
  })

  // 监听activeName 改变发生变化时触发
  const changeTab = (t) => {
    activeTab.value = t
    router.push(t)
  }

  const removeTab = (t) => {
    const tabs = tabList.value
    let a = activeTab.value
    if (a == t) {
      tabs.forEach((tab, index) => {
        if (tab.path == t) {
          const nextTab = tabs[index + 1] || tabs[index - 1]
          if (nextTab) {
            a = nextTab.path
          }
        }
      })
    }

    activeTab.value = a
    tabList.value = tabList.value.filter(tab => tab.path != t)

    cookie.set('tabList', tabList.value)
  }

  const handleClose = (c) => {
    if (c == 'clearAll') {
      // 切换回首页
      activeTab.value = '/'
      // 过滤只剩下首页
      tabList.value = [{
        title: '后台首页',
        path: '/'
      }]
    } else if (c == 'clearOther') {
      // 过滤只剩下首页和当前激活
      tabList.value = tabList.value.filter(tab => tab.path == '/' || tab.path == activeTab.value)
    }
    cookie.set('tabList', tabList.value)
  }

  return {
    activeTab,
    tabList,
    changeTab,
    removeTab,
    handleClose
  }
}